Segmented buttons Guidelines 分段按鈕指導規則

1 單選模式 2 多選模式

Usage 用法

檢視分段控制元件讓使用者可以在幾個不同選項中選擇一個。每次只能選一個選項，就像單選按鈕一樣。

Single-select 單選 2 Muti-sekect 多選

Anatomy 結構

1 容器 2 標籤 3 圖示（可選）4 分割線（可選）5 懸浮狀態

Segments 分段

分段按鈕包含2到5個選項。每個選項之間有清晰的分隔線，可以顯示文字、圖示，或同時顯示兩者。這種設計適用於單選和多選兩種模式。

分段控制元件讓使用者可以在不同選項中進行選擇，比如篩選內容、切換顯示方式或檢視不同資訊。

分段式按鈕最適合用於2-5個選項之間選擇

✓ 分段按鈕最適合用於在2到5個選項之間進行選擇

× 不要在單個分段按鈕中使用超過五個部分。選項應該有限制。如果你有超過五個選項，考慮使用其他元件，如晶片（chips）

Container 容器

容器設定預設的按鈕外觀，包括邊框和背景色。當按鈕被選中時，會顯示明顯的邊框和填充顏色，讓使用者一目瞭然。

Icons 圖示

圖示可以讓分段按鈕更容易理解。新增圖示時要選擇意思明確的圖示，讓使用者一看就懂。

Label text 標籤文字

使用簡短、清楚的文字作為標籤。如果標籤文字太長，可以配上圖示來幫助理解。

✓ 保持標籤簡短且長度一致

× 段落不要換行

✓ 有足夠的對比度，以確保可讀性。

× 圖示可用來替代標籤，但必須清晰的傳達含義

× 避免文字和圖示混搭組合

Single-select 單選

單選模式讓使用者只能選擇一個選項。比如，你要在幾個檢視中選擇一個，或者要設定一個篩選條件時就可以用它。使用者點選不同的選項就能輕鬆切換選擇。

Multi-select 多選

多選模式讓使用者可以一次選擇多個選項。比如當你想篩選內容時，可以同時勾選多個類別。

Placement 放置位置

分段控制元件要放在頁面上易於發現的位置，比如頂部或者與它相關的內容旁邊，這樣使用者就能方便找到和使用它。

✓ 一個分段控制元件被正確放置在篩選欄中的應用案例。

✓ 在分段內設定最大填充，以確保在較大螢幕上的可用性

× 不要讓分段按鈕覆蓋較大螢幕或面板的整個寬度。這可能會在段標籤的兩側留下過多填充，使按鈕的可用性降低。

分段按鈕可以放置在其他元件上，例如底部表單、浮動表單或全屏對話方塊。

Behavior 行為

分段按鈕要做到簡單易用：當使用者點選時要很容易操作，選中後要清楚地顯示出來，讓使用者一眼就能看到自己選了什麼。

分段按鈕的邊框顏色需符合3:1對比度，確保可讀性。選中狀態透過勾選圖示和顏色變化來區分。

使用至少3:1對比度的邊框，可以透過無障礙檢測（正確示例）

邊框對比度不足，未能透過無障礙檢測（錯誤示例）

Initial focus 初始焦點

當使用者第一次使用時，系統會自動把焦點放在第一個選項上。如果是從左到右的語言（比如英文），第一個選項在最左邊；如果是從右到左的語言（比如阿拉伯文），第一個選項在最右邊。不管是單選還是多選模式，這個規則都一樣。